<!--
 * @file 带检索的列表
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2021/07/14
-->
<template>
	<search-table-card title="教师列表">
		<!-- 查询区域 -->
		<template #search>
			<div class="page-search-wrapper">
				<a-form>
					<a-row :gutter="24">
						<a-col v-bind="span">
							<a-form-item label="名字">
								<a-input v-model:value="params.name" placeholder="请输入名字" />
							</a-form-item>
						</a-col>

						<a-col v-bind="span">
							<a-form-item label="角色">
								<a-select v-model:value="params.type" placeholder="请选择角色">
									<a-select-option value="1">校长</a-select-option>
									<a-select-option value="2">教务</a-select-option>
									<a-select-option value="3">教师</a-select-option>
									<a-select-option value="4">保密</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>

						<a-col v-bind="span">
							<a-form-item label="年级">
								<a-input v-model:value="params.grade" placeholder="请输入年级" />
							</a-form-item>
						</a-col>

						<a-col v-bind="span">
							<a-form-item label="班级">
								<a-input v-model:value="params.class" placeholder="请输入班级" />
							</a-form-item>
						</a-col>

						<template v-if="showMoreSearch">
							<a-col v-bind="span">
								<a-form-item label="性别">
									<a-input v-model:value="params.gender" placeholder="请输入性别" />
								</a-form-item>
							</a-col>

							<a-col v-bind="span">
								<a-form-item label="年龄">
									<a-input v-model:value="params.age" placeholder="请输入年龄" />
								</a-form-item>
							</a-col>
						</template>

						<a-col v-bind="span">
							<span class="page-search-buttons">
								<a-button type="primary" @click="onSearch">
									<template #icon><search-outlined /></template>
									查询
								</a-button>
								<a-button @click="onResetSearch">
									<template #icon><reload-outlined /></template>
									重置
								</a-button>
								<a-button @click="showMoreSearch = !showMoreSearch" type="link">
									{{ showMoreSearch ? '收起' : '展开' }}
									<component :is="showMoreSearch ? 'up-outlined' : 'down-outlined'"></component>
								</a-button>
							</span>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</template>

		<!-- 操作按钮区域 -->
		<template #operator>
			<div class="page-operator">
				<a-button type="primary" @click="() => onEdit()">
					<template #icon>
						<plus-outlined></plus-outlined>
					</template>
					新增
				</a-button>
			</div>
		</template>

		<!-- table区域 -->
		<template #list>
			<its-table
				:columns="columns"
				:data-source="list"
				:pagination="pagination"
				:loading="loading"
				@change="handleTableChange"
			>
				<template #bodyCell="{column, record}">
					<template v-if="column.dataIndex === 'operation'">
						<a-button type="link" @click="onEdit(record)">编辑</a-button>
						<a-popconfirm title="确定删除吗？" @confirm="onDelete(record)">
							<a-button type="link" danger>删除</a-button>
						</a-popconfirm>
					</template>
				</template>
			</its-table>
		</template>

		<edit-form v-model:visible="showForm" :model="mdl" @sure="onOk"></edit-form>
	</search-table-card>
</template>

<script lang="ts">
	import {defineComponent, reactive} from 'vue'
	import SearchTableCard from '@/components/searchTableCard/Index.vue'
	import ItsTable from '@/components/itsTable/Index.vue'
	import EditForm from './modules/EditForm.vue'
	import {SearchOutlined, ReloadOutlined, PlusOutlined, DownOutlined, UpOutlined} from '@ant-design/icons-vue'
	import searchList from '@/common/searchList'
	import {exampleApis} from '@/apis'

	export default defineComponent({
		name: 'SearchTable',
		components: {
			SearchTableCard,
			ItsTable,
			EditForm,
			SearchOutlined,
			ReloadOutlined,
			PlusOutlined,
			DownOutlined,
			UpOutlined,
		},
		data() {
			return {
				/* table选中keys*/
				selectedRowKeys: [],
				/* table选中records*/
				selectionRows: [],
				/* 查询折叠 */
				toggleSearchStatus: false,
				/* 弹出框状态 1.新增 2.编辑 3.查看 */
				modalStatus: 1,
			}
		},
		setup() {
			const columns = [
				{
					title: '姓名',
					dataIndex: 'name',
					sorter: true,
				},
				{
					title: '角色',
					dataIndex: 'type',
				},
				{
					title: '操作',
					dataIndex: 'operation',
					width: 140,
				},
			]
			/**
			 * 接口地址
			 */
			const urls = {
				list: exampleApis.list,
			}
			/**
			 * 查询条件
			 */
			const params = reactive({})
			const searchListInfo = searchList(params, urls)
			const {loadList} = searchListInfo
			loadList()

			return {
				columns,
				urls,
				params,
				...searchListInfo,
			}
		},
	})
</script>

<style scoped lang="less"></style>
